<template>
  <div class="emoji-content">
    <div class="emoji-content-item">
      <span @click="addEmoji('👌')">👌</span>
      <span @click="addEmoji('👍')">👍</span>
      <span @click="addEmoji('🤏')">🤏</span>
      <span @click="addEmoji('🤞')">🤞</span>
      <span @click="addEmoji('🙏')">🙏</span>
      <span @click="addEmoji('🌹')">🌹</span>
      <span @click="addEmoji('🥀')">🥀</span>
      <span @click="addEmoji('🍵')">🍵</span>
      <span @click="addEmoji('🍻')">🍻</span>
    </div>
    <div class="emoji-content-item">
      <span @click="addEmoji('🥰')">🥰</span>
      <span @click="addEmoji('🥺')">🥺</span>
      <span @click="addEmoji('😊')">😊</span>
      <span @click="addEmoji('😄')">😄</span>
      <span @click="addEmoji('😅')">😅</span>
      <span @click="addEmoji('😆')">😆</span>
      <span @click="addEmoji('😇')">😇</span>
      <span @click="addEmoji('😈')">😈</span>
      <span @click="addEmoji('😉')">😉</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ChatEmoji",
  methods: {
    addEmoji(emoji) {
      this.$emit("addEmoji", emoji);
    },
  },
};
</script>

<style scoped>
.emoji-content-item {
  color: #000;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  font-size: 14px;
  display: flex;
}
.emoji-content-item span {
  width: 20px;
  height: 26px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
